<template>
	<div>
		<div class="completeOrderInfo">
			<div class="white">
				<div style="text-align: center;">
					<div class="padding-top-10">
						<span class="text-20">{{userInfo.orderCount}}</span>
						<span class="text-14">件</span>
					</div>
					<div class="text-14">累计完成订单</div>
				</div>
				<div class="rowCenter" style="padding-left: 5vw;padding-top: 30px;">
					<div class="text-16 betweenCenter" @click="showTime=true">
						<div>{{time}}</div>
						<van-icon size="16" name="arrow-down" />
					</div>
					<div class="text-14 margin-left-15">当月累计完成:{{total}}件</div>
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<div>
			<div v-if="showSkeleton">
				<div v-for="o in 10" :key="o" class="width82 backgroundWhite radius5 margin-top-10">
					<van-skeleton :row="2" />
				</div>
			</div>
			<van-empty v-if="!showSkeleton&&orderList.length<=0" class="custom-image" :image="emptyImg"
				description="您没有订单" />
			<div v-if="!showSkeleton&&orderList.length>0">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div v-for="(item,index) in orderList" :key="index"
							class="width82 backgroundWhite radius5 margin-top-10">
							<div class="text-14">订单编号:{{item.orderCode}}</div>
							<div class="text-14">完成时间:{{item.finalDate}}</div>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>

		</div>

		<!-- 时间选择 -->
		<van-popup v-model="showTime" position="bottom">
			<van-datetime-picker type="year-month" title="选择时间" :max-date="maxDate" @confirm="confirmTime"
				@cancel="cancelTime" />
		</van-popup>

	</div>
</template>

<script>
	import BaseView from "@/views/BaseView.vue"
	export default {
		extends: BaseView,
		data() {
			return {
				title: "累计完成订单",
				refreshing:false,
				loading:false,
				finished:false,
				showSkeleton: true,
				showTime: false,
				maxDate: new Date(),
				time: "",
				page: 1, //当前页
				total: 0, //总数
				orderList: [],
				userInfo:{},
			}
		},
		created() {
			// setTimeout(() => {
			// 	this.showSkeleton = false
			// }, 1000)

			var timeList = this.getDateRange(0)
			this.time = timeList[0]
			this.getFinishOrderList()
			this.getUserInfo()
		},
		methods: {
			//查询用户信息（包含累计数量）
			getUserInfo(){
				this.$axios.get("member/base/memberInfo").then(res=>{
					console.log("用户信息",res)
					if(res.code==1){
						this.userInfo=res.data
					}
				})
			},
			//查询订单列表
			getFinishOrderList() {
				this.$axios.get("/delivery/base/finishOrderList", {
					params: {
						page: this.page,
						date: this.time
					}
				}).then(res => {
					console.log("完成的订单", res)
					this.showSkeleton = false
					this.refreshing = false
					this.loading=false
					if (res.code == 1) {
						if(this.page==1){
							this.orderList=res.data
						}else{
							this.orderList=this.orderList.concat(res.data)
						}
						this.total=res.count
						if(this.total<=this.orderList.length){
							this.finished=true
						}
					}
				})
			},
			confirmTime(value) {
				console.log("选择时间", value)
				this.time = this.formateDate(value)
				this.showTime = false
				this.page=1
				this.orderList=[]
				this.finished=false
				this.showSkeleton=true
				this.getFinishOrderList()
			},
			cancelTime() {
				this.showTime = false
			},
			//下拉
			onRefresh(){
				this.page=1
				this.orderList=[]
				this.finished=false
				this.refreshing = true
				this.showSkeleton=true
				this.getFinishOrderList()
			},
			onLoad(){
				this.page++
				this.getFinishOrderList()
			}
			
		}
	}
</script>

<style>
	.completeOrderInfo {
		width: 100vw;
		height: 140px;
		background-image: url(../assets/images/orderBg.png);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
	}
</style>
